<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>dizena</title>

    <!-- Favicon -->
    <link rel="icon" href="/web/chat/media/img/favicon.png" type="image/png">

    <!-- Bundle Styles -->
    <link rel="stylesheet" href="/web/chat/vendor/bundle.css">

    <!-- App styles -->
    <link rel="stylesheet" href="/web/chat/css/app.min.css">
</head>
<body>

<!-- Page loading -->
<div class="page-loading"></div>
<!-- ./ Page loading -->

<!-- Body plate -->
<div class="body-plate"></div>
<!-- ./ Body plate -->

<!-- Disconnected modal -->
<div class="modal fade" id="disconnected" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-zoom" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row mb-5">
                    <div class="col-md-6 offset-md-3">
                        <img src="/web/chat/media/svg/undraw_warning_cyit.svg" class="img-fluid" alt="image">
                    </div>
                </div>
                <p class="lead text-center">Application disconnected</p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-success btn-lg">Reconnect</button>
                <a href="/base/logout" class="btn btn-link">Logout</a>
            </div>
        </div>
    </div>
</div>
<!-- ./ Disconnected modal -->

<!-- Voice call modal -->
<div class="modal call fade" id="call" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="call">
                    <div>
                        <figure class="mb-4 avatar avatar-xl">
                            <img src="/web/chat/media/img/avatar7.png" class="rounded-circle" alt="image">
                        </figure>
                        <h4>Brietta Blogg <span class="text-success">calling...</span></h4>
                        <div class="action-button">
                            <button type="button" class="btn btn-danger btn-floating btn-lg" data-dismiss="modal">
                                <i data-feather="x"></i>
                            </button>
                            <button type="button" class="btn btn-success btn-pulse btn-floating btn-lg">
                                <i data-feather="phone"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ./ Voice call modal -->

<!-- voice call modal -->
<div class="modal call fade" id="videoCall" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="call">
                    <div>
                        <figure class="mb-4 avatar avatar-xl">
                            <img src="/web/chat/media/img/avatar4.png" class="rounded-circle" alt="image">
                        </figure>
                        <h4>Brietta Blogg <span class="text-success">video calling...</span></h4>
                        <div class="action-button">
                            <button type="button" class="btn btn-danger btn-floating btn-lg" data-dismiss="modal">
                                <i data-feather="x"></i>
                            </button>
                            <button type="button" class="btn btn-success btn-pulse btn-floating btn-lg">
                                <i data-feather="video"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ./ voice call modal -->

<!-- Add friends modal -->
<div class="modal fade" id="addFriends" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i data-feather="user-plus" class="mr-2"></i> Add Friends
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="ti-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">Send invitations to friends.</div>
                <form>
                    <div class="form-group">
                        <label for="new_email" class="col-form-label">Email addresses</label>
                        <input type="email" class="form-control" id="new_email">
                    </div>
                    <div class="form-group">
                        <label for="new_message" class="col-form-label">Invitation message</label>
                        <textarea class="form-control" id="new_message"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button onclick="applyNew()" type="button" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</div>
<!-- ./ Add friends modal -->

<!-- New group modal -->
<div class="modal fade" id="newGroup" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i data-feather="users" class="mr-2"></i> New Group
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="ti-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="group_name" class="col-form-label">Group name</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="group_name">
                            <div class="input-group-append">
                                <button class="btn btn-light" data-toggle="tooltip" title="Emoji" type="button">
                                    <i data-feather="smile"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <p class="mb-2">The group members</p>
                    <div class="form-group">
                        <div class="avatar-group">
                            <figure class="avatar" data-toggle="tooltip" title="Tobit Spraging">
                                <span class="avatar-title bg-success rounded-circle">T</span>
                            </figure>
                            <figure class="avatar" data-toggle="tooltip" title="Cloe Jeayes">
                                <img src="/web/chat/media/img/avatar6.png" class="rounded-circle" alt="image">
                            </figure>
                            <figure class="avatar" data-toggle="tooltip" title="Marlee Perazzo">
                                <span class="avatar-title bg-warning rounded-circle">M</span>
                            </figure>
                            <figure class="avatar" data-toggle="tooltip" title="Stafford Pioch">
                                <img src="/web/chat/media/img/avatar2.png" class="rounded-circle" alt="image">
                            </figure>
                            <figure class="avatar" data-toggle="tooltip" title="Bethena Langsdon">
                                <span class="avatar-title bg-info rounded-circle">B</span>
                            </figure>
                            <a href="#" title="Add friends">
                                <figure class="avatar">
                                    <span class="avatar-title bg-primary rounded-circle">
                                        <i data-feather="plus"></i>
                                    </span>
                                </figure>
                            </a>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="description" class="col-form-label">Description</label>
                        <textarea class="form-control" id="description"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Create Group</button>
            </div>
        </div>
    </div>
</div>
<!-- ./ New group modal -->

<!-- Setting modal -->
<div class="modal fade" id="settingModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i data-feather="settings" class="mr-2"></i> Settings
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="ti-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#account" role="tab" aria-controls="account"
                           aria-selected="true">Account</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#notification" role="tab"
                           aria-controls="notification" aria-selected="false">Notification</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
                           aria-selected="false">Security</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane show active" id="account" role="tabpanel">
                        <div class="form-item custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" checked id="customSwitch1">
                            <label class="custom-control-label" for="customSwitch1">Allow connected contacts</label>
                        </div>
                        <div class="form-item custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" checked id="customSwitch2">
                            <label class="custom-control-label" for="customSwitch2">Confirm message requests</label>
                        </div>
                        <div class="form-item custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" checked id="customSwitch3">
                            <label class="custom-control-label" for="customSwitch3">Profile privacy</label>
                        </div>
                        <div class="form-item custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="customSwitch4">
                            <label class="custom-control-label" for="customSwitch4">Developer mode options</label>
                        </div>
                        <div class="form-item custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" checked id="customSwitch5">
                            <label class="custom-control-label" for="customSwitch5">Two-step security
                                verification</label>
                        </div>
                    </div>
                    <div class="tab-pane" id="notification" role="tabpanel">
                        <div class="form-item custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" checked id="customSwitch6">
                            <label class="custom-control-label" for="customSwitch6">Allow mobile notifications</label>
                        </div>
                        <div class="form-item custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="customSwitch7">
                            <label class="custom-control-label" for="customSwitch7">Notifications from your
                                friends</label>
                        </div>
                        <div class="form-item custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="customSwitch8">
                            <label class="custom-control-label" for="customSwitch8">Send notifications by email</label>
                        </div>
                    </div>
                    <div class="tab-pane" id="contact" role="tabpanel">
                        <div class="form-item custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="customSwitch9">
                            <label class="custom-control-label" for="customSwitch9">Suggest changing passwords every
                                month.</label>
                        </div>
                        <div class="form-item custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" checked id="customSwitch10">
                            <label class="custom-control-label" for="customSwitch10">Let me know about suspicious
                                entries to your account</label>
                        </div>
                        <div class="form-item">
                            <p>
                                <a class="btn btn-light" data-toggle="collapse" href="#collapseExample" role="button"
                                   aria-expanded="false"
                                   aria-controls="collapseExample">
                                    <i data-feather="plus" class="mr-2"></i> Security Questions
                                </a>
                            </p>
                            <div class="collapse" id="collapseExample">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Question 1">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Answer 1">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Question 2">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Answer 2">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
<!-- ./ Setting modal -->

<!-- Edit profile modal -->
<div class="modal fade" id="editProfileModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i data-feather="edit-2" class="mr-2"></i> Edit Profile
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="ti-close"></i>
                </button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#personal" role="tab"
                           aria-controls="personal" aria-selected="true">Personal</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#about" role="tab" aria-controls="about"
                           aria-selected="false">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#social-links" role="tab"
                           aria-controls="social-links" aria-selected="false">Hobby</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane show active" id="personal" role="tabpanel">
                        <form>
                            <div class="form-group">
                                <label for="edit_nickname" class="col-form-label">Nickname</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="edit_nickname">
                                    <div class="input-group-append">
                                        <span class="input-group-text">
                                            <i data-feather="user"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-form-label">Avatar</label>
                                <div class="d-flex align-items-center">
                                    <div>
                                        <figure class="avatar mr-3 item-rtl">
                                            <img id="edit_customFile_image" src="/web/chat/media/img/avatar8.png" class="rounded-circle" alt="image">
                                        </figure>
                                    </div>
                                    <div class="custom-file">
                                        <input type="hidden" id="edit_customFile_url">
                                        <input onchange="editPic()" type="file" class="custom-file-input" id="edit_customFile" multiple="false" size="512000" accept="image/jpg" >
                                        <label class="custom-file-label" for="edit_customFile">Choose file</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="edit_city" class="col-form-label">City</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="edit_city" placeholder="City">
                                    <div class="input-group-append">
                                        <span class="input-group-text">
                                            <i data-feather="target"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="edit_sex" class="col-form-label">Sex</label>
                                <div class="input-group">
                                    <select class="form-control" id="edit_sex" placeholder="Sex">
                                        <option value="Boy">男</option>
                                        <option value="Girl">女</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="edit_homeAddress" class="col-form-label">HomeAddress</label>
                                <input type="text" class="form-control" id="edit_homeAddress" placeholder="Home Address">
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane" id="about" role="tabpanel">
                        <form>
                            <div class="form-group">
                                <label for="edit_about-text" class="col-form-label">Write a few words that describe you</label>
                                <textarea class="form-control" id="edit_about-text"></textarea>
                            </div>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" checked id="customCheck1">
                                <label class="custom-control-label" for="customCheck1">View profile</label>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane" id="social-links" role="tabpanel">
                        <form>
                            <div class="form-group">
                                <div class="input-group">
                                    <label>
                                        <input type="checkbox" name="edit_hobby" value="Running"> Running
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <label>
                                        <input type="checkbox" name="edit_hobby" value="Swimming"> Swimming
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <label>
                                        <input type="checkbox" name="edit_hobby" value="Skiing"> Skiing
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <label>
                                        <input type="checkbox"  name="edit_hobby" value="Delicious Food"> Delicious Food
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <label>
                                        <input type="checkbox" name="edit_hobby" value="Play Game"> Play Game
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <label>
                                        <input type="checkbox" name="edit_hobby" value="Read Book"> Read Book
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <label>
                                        <input type="checkbox" name="edit_hobby" value="Sing"> Sing
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <label>
                                        <input type="checkbox" name="edit_hobby" value="Dance"> Dance
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <label>
                                        <input type="checkbox" name="edit_hobby" value="Trip"> Trip
                                    </label>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button onclick="editProfile()" type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
<!-- ./ Edit profile modal -->

<!-- Header -->
<header class="main-header">
    <div id="logo">
        <a href="#">
            <img src="/web/chat/media/img/logo.png" alt="logo">
        </a>
    </div>
    <div class="header-nav">
        <ul class="nav">
            <li><a href="#" data-navigation-target="contact-information">Profile</a></li>
            <li><a href="#" data-navigation-target="friends">Friends</a></li>
            <li><a href="#" data-navigation-target="favorites">Favorites</a></li>
            <li><a href="#" data-navigation-target="Applies">Applies</a></li>
        </ul>
    </div>
    <div class="header-right">
        <div class="navbar-toggler">
            <a href="#">
                <i data-feather="menu"></i>
            </a>
        </div>
        <div class="dropdown">
            <a href="#" data-toggle="dropdown">
                <span class="mr-2 d-none d-sm-inline-block" th:text="${user.account}">Account</span>
                <figure class="avatar">
                    <img id="selfPic" th:src="${user.pic}" class="rounded-circle" alt="image">
                </figure>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="#" class="dropdown-item" data-navigation-target="contact-information">Profile</a>
                <a href="#" class="dropdown-item" data-toggle="modal" data-target="#settingModal">Settings</a>
                <div class="dropdown-divider"></div>
                <a href="/base/logout" class="dropdown-item text-danger">Logout</a>
            </div>
        </div>
    </div>
</header>
<!-- ./ Header -->

<!-- Layout -->
<div class="layout">

    <!-- Content -->
    <div class="content">

        <!-- Chats sidebar -->
        <div id="chats" class="sidebar chat-list active">
            <header>
                <span>Chats</span>
            </header>
            <form>
                <input type="text" class="form-control" placeholder="Search">
            </form>
            <div class="sidebar-body">
                <ul class="list-group list-group-flush" id="chat-list">
                    <!-- 聊天列表 -->
                </ul>
            </div>
            <div class="p-3">
                <button data-navigation-target="new-chat" class="btn btn-primary btn-block btn-lg">New Chat</button>
            </div>
        </div>
        <!-- ./ Chats sidebar -->

        <!-- Friends sidebar -->
        <div id="friends" class="sidebar">
            <header>
                <span>Friends</span>
                <ul class="list-inline">
                    <li class="list-inline-item" data-toggle="tooltip" title="Add friends">
                        <a class="btn btn-outline-light" href="#" data-toggle="modal" data-target="#addFriends">
                            <i data-feather="user-plus"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#" class="btn btn-danger sidebar-close">
                            <i data-feather="x"></i>
                        </a>
                    </li>
                </ul>
            </header>
            <form>
                <input type="text" class="form-control" placeholder="Search">
            </form>
            <div class="sidebar-body">
                <p id="friend-cnt">3 Friends</p>
                <div>
                    <ul class="list-group list-group-flush" id="friend-list">
                        <!-- 好友列表 -->
                    </ul>
                </div>
            </div>
        </div>
        <!-- ./ Friends sidebar -->

        <!-- New chat sidebar -->
        <div id="new-chat" class="sidebar">
            <header>
                <span>New Chat</span>
                <ul class="list-inline">
                    <li class="list-inline-item" data-toggle="tooltip" title="Create Group">
                        <a class="btn btn-outline-light" href="#" data-toggle="modal" data-target="#newGroup">
                            <i data-feather="users"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#" class="btn btn-danger sidebar-close">
                            <i data-feather="x"></i>
                        </a>
                    </li>
                </ul>
            </header>
            <form>
                <input type="text" class="form-control" placeholder="Search">
            </form>
            <div class="sidebar-body">
                <ul class="list-group list-group-flush" id="new-chat-list">

                </ul>
            </div>
        </div>
        <!-- ./ New chat sidebar -->

        <!-- Favorites sidebar -->
        <div id="favorites" class="sidebar">
            <header>
                <span>Favorites</span>
                <ul class="list-inline">
                    <li class="list-inline-item">
                        <a href="#" class="btn btn-danger sidebar-close">
                            <i data-feather="x"></i>
                        </a>
                    </li>
                </ul>
            </header>
            <form>
                <input type="text" class="form-control" placeholder="Search">
            </form>
            <div class="sidebar-body">
                <ul class="list-group list-group-flush users-list" id="favorite-list">

                </ul>
            </div>
        </div>
        <!-- ./ Stars sidebar -->

        <!-- Applies sidebar -->
        <div id="Applies" class="sidebar">
            <header>
                <span>Applies</span>
                <ul class="list-inline">
                    <li class="list-inline-item">
                        <a href="#" class="btn btn-danger sidebar-close">
                            <i data-feather="x"></i>
                        </a>
                    </li>
                </ul>
            </header>
            <form>
                <input type="text" class="form-control" placeholder="Search">
            </form>
            <div class="sidebar-body">
                <ul class="list-group list-group-flush users-list" id="applies_list">
                    <li class="list-group-item">
                        <figure class="avatar">
                            <span class="avatar-title bg-secondary rounded-circle">R</span>
                        </figure>
                        <div class="users-list-body">
                            <div>
                                <h5>Rochelle Golley</h5>
                                <p>Lorem ipsum dolor sitsdc sdcsdc sdcsdcs</p>
                            </div>
                            <div class="users-list-action">
                                <div class="action-toggle">
                                    <div class="dropdown">
                                        <a data-toggle="dropdown" href="#">
                                            <i data-feather="more-horizontal"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <a href="#" class="dropdown-item btn-open-chat">Open</a>
                                            <a href="#" class="dropdown-item">Restore</a>
                                            <div class="dropdown-divider"></div>
                                            <a href="#" class="dropdown-item text-danger">Delete</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
        <!-- ./ Applies sidebar -->

        <!-- Profile sidebar -->
        <div id="contact-information" class="sidebar">
            <header>
                <span>Profile</span>
                <ul class="list-inline">
                    <li class="list-inline-item">
                        <a href="#" class="btn btn-outline-light" data-toggle="modal" data-target="#editProfileModal" title="Edit profile">
                            <i data-feather="edit-2"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#" class="btn btn-danger sidebar-close">
                            <i data-feather="x"></i>
                        </a>
                    </li>
                </ul>
            </header>
            <div class="sidebar-body">
                <div class="text-center">
                    <figure class="avatar avatar-xl mb-4" id="info_pic">

                    </figure>
                    <h5 class="mb-1" id="info_name"></h5>
                    <small class="text-muted font-italic" id="info_last_login_ts"></small>
                    <ul class="nav nav-tabs justify-content-center mt-5" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Media</a>
                        </li>
                    </ul>
                </div>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <p class="text-muted" id="info_description" >Content</p>
                        <div class="mt-4 mb-4">
                            <h6>Account</h6>
                            <p class="text-muted" id="info_account">Mobile</p>
                        </div>
                        <div class="mt-4 mb-4">
                            <h6>City</h6>
                            <p class="text-muted" id="info_city">City</p>
                        </div>
                        <div class="mt-4 mb-4">
                            <h6>Hometown</h6>
                            <p class="text-muted" id="info_homeAddress">HomeAddress</p>
                        </div>
                        <div class="mt-4 mb-4">
                            <h6 class="mb-3">Hobby</h6>
                            <p class="text-muted" id="info_hobby">hobby</p>
                        </div>
                        <div class="mt-4 mb-4">
                            <h6 class="mb-3">Settings</h6>
                            <div class="form-group">
                                <div class="form-item custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="customSwitch11">
                                    <label class="custom-control-label" for="customSwitch11">Block</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="form-item custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" checked=""  id="customSwitch12">
                                    <label class="custom-control-label" for="customSwitch12">Mute</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="form-item custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="customSwitch13">
                                    <label class="custom-control-label" for="customSwitch13">Get notification</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <h6 class="mb-3 d-flex align-items-center justify-content-between">
                            <span>Recent Files</span>
                            <a href="#" class="btn btn-link small">
                                <i data-feather="upload" class="mr-2"></i> Upload
                            </a>
                        </h6>
                        <div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item pl-0 pr-0 d-flex align-items-center">
                                    <a href="#">
                                        <i class="fa fa-file-pdf-o text-danger mr-2"></i> report4221.pdf
                                    </a>
                                </li>
                                <li class="list-group-item pl-0 pr-0 d-flex align-items-center">
                                    <a href="#">
                                        <i class="fa fa-image text-muted mr-2"></i> avatar_image.png
                                    </a>
                                </li>
                                <li class="list-group-item pl-0 pr-0 d-flex align-items-center">
                                    <a href="#">
                                        <i class="fa fa-file-excel-o text-success mr-2"></i>
                                        excel_report_file2020.xlsx
                                    </a>
                                </li>
                                <li class="list-group-item pl-0 pr-0 d-flex align-items-center">
                                    <a href="#">
                                        <i class="fa fa-file-text-o text-warning mr-2"></i> articles342133.txt
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Profile sidebar -->

        <!-- Chat -->
        <div class="chat">
            <div class="chat-body">

                <div class="no-message-container" id="msg-show-none" style="display:none;">
                    <div class="row mb-5">
                        <div class="col-md-4 offset-md-4">
                            <img src="/web/chat/media/svg/undraw_empty_xct9.svg" class="img-fluid" alt="image">
                        </div>
                        <p class="lead">Please to chat</p>
                    </div>
                </div>

                <div class="messages" id="msg-show">

                </div>

            </div>
            <div class="chat-footer">
                <form>
                    <div>
                        <button class="btn btn-light mr-3 d-none d-sm-inline-block" data-toggle="tooltip" title="Emoji" type="button">
                            <i data-feather="smile"></i>
                        </button>
                        <button class="btn btn-danger mr-3 d-inline d-sm-none btn-close-chat" data-toggle="tooltip" title="Emoji" type="button">
                            <i data-feather="arrow-left"></i>
                        </button>
                    </div>
                    <input id="msg_content" type="text" class="form-control" placeholder="Write a message.">
                    <div class="form-buttons">
                        <button class="btn btn-light d-none d-sm-inline-block" data-toggle="tooltip" title="Add files" type="button">
                            <i data-feather="paperclip"></i>
                        </button>
                        <button class="btn btn-light d-none d-sm-inline-block" data-toggle="tooltip" title="Send a voice record" type="button">
                            <i data-feather="mic"></i>
                        </button>
                        <button onclick="sendMsg()" class="btn btn-primary" type="button">
                            <i data-feather="send"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <!-- ./ Chat -->

    </div>
    <!-- ./ Content -->

</div>
<!-- ./ Layout -->
<div style="display:none">
    <input type="hidden" id="login_user_id" th:value="${user.id}">
    <input type="hidden" id="receiver_id">
</div>
<!-- Bundle -->
<script src="/web/chat/vendor/bundle.js"></script>

<!-- App scripts -->
<script src="/web/chat/js/app.min.js"></script>

<!-- Examples -->
<script src="/web/chat/js/chat.js"></script>
</body>
</html>